<template>
	<view>
		<view class="" v-show="notice_count > 0 && is_admin == '1'">
			<u-notice-bar :text="'有' + notice_count + '个外部人员申请'" mode="closable"
				url="/packageChat/GroupList/OutUserList"></u-notice-bar>
		</view>


		<!-- 消息界面 -->
		<view class="" v-show="on_tabbar_name == 'chat'">
			<view class="search-box" @click="goSearch()">
				<u-search placeholder="消息搜索" :showAction="false" disabled shape="square"></u-search>
			</view>
			
			<view class="" style="height: 120rpx;">
				
			</view>
			
			<view class="lineClass" v-for="item in group_list">
				<view class="rowBox">
					<view class="right" @click="goDetails(item)">
						<view class="img">
							<!-- <image class="imgItem" src='/static/backImg/wlogo3.png'></image> -->
							<image class="imgItem" :src='item.avatar'></image>
							<view class="jiaobiao" v-if="item.count !== '0'">
								{{ item.count > 99 ? '99+' : item.count }}
							</view>
						</view>
						<view class="text">
							<view class="line-1">
								<text class="title">{{item.name}}</text>
								<!-- <text class="time">{{item.last_content.add_time}}</text> -->
							</view>
							<view class="info">{{item.last_content.content}}</view>
						</view>
					</view>

					<view style="margin-top: 20rpx;margin-left: 40rpx;">
						<u-icon name="list-dot" size="28" @click="groupSet(item)"></u-icon>
					</view>
				</view>
			</view>

		</view>
		<!-- 通讯录界面 -->
		<view class="" v-show="on_tabbar_name == 'list'">
			<view class="" style="height: 80rpx;text-align: center;line-height: 80rpx;">
				管理员
			</view>

			<view class="lineClass" v-for="item in leadlist" style="padding-top: 20rpx;padding-bottom: 20rpx;">
				<view class="rowBox">
					<view class="right">
						<view class="img">
							<image class="imgItem" :src='item.avatar'></image>
						</view>
						<view class="text">
							<view class="line-1">
								<text class="title" style="color: black;font-weight: 500;">{{item.nickname}}</text>
							</view>
						</view>
					</view>

					<!-- <view v-if="is_admin == '1'" style="margin-top: 20rpx;margin-left: 140rpx;">
						<u-icon name="more-dot-fill" size="28" @click="removeAdmin(item)"></u-icon>
					</view> -->
				</view>
			</view>

			<view v-if="out_user_list.length > 0"
				style="height: 80rpx;text-align: center;line-height: 80rpx;margin-top: 30rpx;">
				外部人员
			</view>

			<view class="lineClass" v-for="item in out_user_list" style="padding-top: 20rpx;padding-bottom: 20rpx;">
				<view class="rowBox">
					<view class="right">
						<view class="img">
							<image class="imgItem" :src='item.avatar'></image>
						</view>
						<view class="text">
							<view class="line-1">
								<text class="title" style="color: black;font-weight: 500;">{{item.nickname}}</text>
							</view>
						</view>
					</view>

					<view v-if="is_admin == '1'" style="margin-top: 20rpx;margin-left: 140rpx;">
						<u-icon name="more-dot-fill" size="28" @click="removeOutUser(item)"></u-icon>
					</view>
				</view>
			</view>

		</view>

		<!-- 外部人员我的界面 -->
		<view class="" v-show="on_tabbar_name == 'me'">

			<!-- <view class="lineClass" style="padding-top: 20rpx;padding-bottom: 20rpx;">
				<view class="rowBox">
					<view class="right">
						<view class="img">
							<u-icon name="edit-pen" color="#2b85e4 " size="28"></u-icon>
						</view>
						<view class="text">
							<view class="line-1" @click="editUser()">
								<text class="title" style="color: black;font-weight: 500;">编辑个人信息</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="me-box">
				<view class="avatar">
					<image :src="avatar" mode=""></image>
				</view>

				<view class="me-title">

					<text class="name">{{nickname}}</text>
				</view>
				<view class="me-title">

					<text class="name">{{username}}</text>
				</view>


			</view>

			<view style="display: flex;
			justify-content: center;margin-top: 100rpx;">
				<view class="login_btn all_text_center" @click="editUser()" v-if="is_outuser == '1'">
					编辑个人信息
				</view>
			</view>




		</view>


		<!-- 添加按钮,管理员可见 -->
		<view class="add_client" v-show="is_admin == '1'">
			<image src="/static/client/tianjia.png" style="width: 137rpx;height: 137rpx;" @click="open()"></image>
		</view>

		<view class="space"></view>
		<u-popup :show="pop_show" mode="center" @close="close" @open="open">
			<view class="popup_box">
				<view class="title">
					请选择添加类型
				</view>
				<view class="item" @click="addGroup">
					添加聊天组
				</view>
				<view class="item2" @click="handleGoAddUser()">
					添加管理员
				</view>
			</view>
		</u-popup>

		<view class="" v-if="is_admin == '1'">
			<u-tabbar :value="on_tabbar_name">
				<u-tabbar-item name="chat" text="消息" icon="chat" @click="click1('chat')"></u-tabbar-item>
				<u-tabbar-item name="list" text="通讯录" icon="man-add" @click="click1('list')"></u-tabbar-item>
			</u-tabbar>
		</view>

		<view class="" v-if="is_admin == '0'">
			<u-tabbar :value="on_tabbar_name">
				<u-tabbar-item name="chat" text="消息" icon="chat" @click="click2('chat')"></u-tabbar-item>
				<u-tabbar-item name="me" text="我的" icon="account" @click="click2('me')"></u-tabbar-item>
			</u-tabbar>
		</view>

		<view class="" style="width: 100%;height: 100rpx;">

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				member_id: '',
				is_outuser: '',

				group_list: '',
				leadlist: [],
				memberlist: [],
				out_user_list: [],

				on_tabbar_name: 'chat',
				out_tabbar_name: 'chat',

				pop_show: false,

				notice_count: 0,
				is_admin: '0', //是否为管理员

				username: '',
				nickname: '',
				avatar: '',
				timer:''
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('chat_token') || ''
			this.member_id = uni.getStorageSync('chat_member_id') || ''
			this.is_outuser = uni.getStorageSync('chat_is_outuser') || ''
			this.getIsAdmin()
			this.getGroupList()
			
		},
		onShow() {
			
			this.getAdminMemberList()
			this.getOutUserList()
			this.getMemberList()
			this.timer = setInterval(() => {
			    this.getGroupList()
				this.getOutApply()
			}, 2000);
			
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			 clearInterval(this.timer)
		},
		methods: {
			//点击前往搜索页
			goSearch(){
				uni.navigateTo({
					url:'searchPage'
				})
			},

		
			// 获取个人细信息
			async getMemberList() {
				const res = await this.$myRequest({
					url: 'Chat/member_info',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						is_outuser: this.is_outuser
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				this.avatar = res.data.datas.avatar
				this.username = res.data.datas.username
				this.nickname = res.data.datas.nickname
			},

			// 删除外部人员
			removeOutUser(item) {
				uni.showModal({
					title: '提示',
					content: '是否删除该人员?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.removeOutUser2(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async removeOutUser2(item) {
				const res = await this.$myRequest({
					url: 'Chat/group_member_del',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						uid: item.member_id,
						company_id: '1'
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				this.getOutUserList()
			},

			// 删除管理员
			removeAdmin(item) {
				uni.showModal({
					title: '提示',
					content: '是否删除该人员?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.removeAdmin2(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async removeAdmin2(item) {
				const res = await this.$myRequest({
					url: 'Chat/admin_member_del',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						uid: item.member_id,
						company_id: '1'
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
			},

			// 外部员工前往编辑个人信息
			editUser() {
				uni.navigateTo({
					url: 'UserList'
				})
			},

			// 点击群组设置
			groupSet(item) {
				console.log(item)
				uni.navigateTo({
					url: 'GroupDetail?gid=' + item.gid
				})
			},

			// 获取是否为管理员
			async getIsAdmin() {
				const res = await this.$myRequest({
					url: 'Chat/is_chat_admin',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						is_outuser: this.is_outuser,
						company_id: '1'
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				this.is_admin = res.data.datas.is_chat_admin
			},

			// 获取外部人员申请列表
			async getOutApply() {
				const res = await this.$myRequest({
					url: 'Chat/member_apply_list',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						is_outuser: this.is_outuser,
						company_id: '1'
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				this.notice_count = res.data.datas.count

			},


			// 点击添加聊天组
			addGroup() {
				this.pop_show = false
				uni.navigateTo({
					url: 'addGroup'
				})
			},

			open() {
				// console.log('open');
				this.pop_show = true
			},
			close() {
				this.pop_show = false
				// console.log('close');
			},

			// 长按添加群聊成员
			addGroupUser(item) {
				uni.navigateTo({
					url: 'UserList?gid=' + item.gid
				})
			},


			// 点击添加人员
			handleGoAddUser() {
				this.pop_show = false
				uni.navigateTo({
					url: 'addAdmin'
				})
			},

			// 获取聊天列表
			async getGroupList() {
				const res = await this.$myRequest({
					url: 'Chat/my_chat_group',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						is_outuser: this.is_outuser
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})

				this.group_list = res.data.datas.list
			},
			// 点击前往聊天详情
			goDetails(item) {
				uni.navigateTo({
					url: 'ChatDetail?gid=' + item.gid
				})
			},

			// 获取管理员列表
			async getAdminMemberList() {
				const res = await this.$myRequest({
					url: 'Chat/admin_member_list',
					method: 'POST',
					data: {
						token: this.token,
						member_id: this.member_id,
						is_outuser: this.is_outuser,
						company_id: '1'
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})

				this.leadlist = res.data.datas.adminlist.adminlist

			},

			// 获取外部人员列表
			async getOutUserList() {
				const res = await this.$myRequest({
					url: 'Chat/group_member_list',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: '1',
						is_outuser: this.is_outuser
					},
				});
				if (res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				})
				this.out_user_list = res.data.datas.outuserlist.outuserlist

			},

			// 点击tabbar
			click1(val) {
				this.on_tabbar_name = val
			},

			// 点击tabbar
			click2(val) {
				this.on_tabbar_name = val
			},


		}
	}
</script>

<style lang="scss" scoped>
	.login_btn {
		width: 540rpx;
		height: 80rpx;
		background: #2eb3ff;
		color: #ffffff;
		box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.4);
		border-radius: 12rpx;
		font-size: 36rpx;
		margin-top: 60rpx;
	}

	.me-box {
		width: 100%;
		height: 500rpx;
		background-color: #2eb3ff;

		// border-radius: 0 0 20rpx 20rpx;
		.avatar {
			width: 100%;
			display: flex;
			justify-content: center;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 12%;
				margin-top: 100rpx;
			}
		}

		.me-title {
			margin-top: 50rpx;
			width: 100%;
			text-align: center;
			color: #FFFFFF;

			.name {
				font-weight: bold;
			}
		}


	}

	.popup_box {
		width: 500rpx;
		height: 500rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			margin-top: 30rpx;
			font-weight: 400;
			color: #666666;
			font-size: 32rpx;
			text-align: center;
		}

		.item {
			width: 250rpx;
			height: 120rpx;
			background-color: #40A0F2;
			border-radius: 12rpx;
			margin-top: 50rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.15);
		}

		.item2 {
			width: 250rpx;
			height: 120rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.15);
		}
	}


	.add_client {
		width: 137rpx;
		height: 137rpx;
		position: fixed;
		right: 25rpx;
		bottom: 200rpx;
		z-index: 5;
	}


	// 模块间隔断
	.space {
		width: 100%;
		height: 30rpx;
	}
	
	.search-box{
		width: 100%;
		padding: 20rpx;
		
		position: fixed;
		top: 0;
		box-sizing: border-box;
		z-index: 10;
		background-color: #FFFFFF;
		// box-shadow: 1px 3px 15px 0px rgba(3, 70, 126, 0.2);
	}

	.lineClass {
		
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		box-shadow: 1px 3px 15px 0px rgba(3, 70, 126, 0.2);
		.line1 {
			display: flex;
			flex-direction: row;
			align-items: center;

			.left {
				margin-left: 40rpx;
				width: 10rpx;
				height: 30rpx;
				background: #2eb3ff;
			}
		}

		.line2 {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.itemClass {
			width: 200rpx;
			font-size: 24rpx;
			margin-top: 25rpx;
			margin-left: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.jiaobiao {
				width: 48rpx;
				height: 35rpx;
				border-radius: 35rpx;
				background-color: #ff5c24;
				color: #ffffff;
				position: absolute;
				top: -20rpx;
				right: 35rpx;
				text-align: center;
				font-size: 24rpx;
			}
		}

		.iconClass {
			width: 70rpx;
			height: 70rpx;
			border-radius: 10rpx;
		}
	}

	.rowBox {
		display: flex;
		justify-content: flex-start;

		.right {
			display: flex;
			align-items: center;
			margin-left: 50rpx;

			.img {
				position: relative;

				.imgItem {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				.jiaobiao {
					width: 48rpx;
					height: 35rpx;
					border-radius: 35rpx;
					background-color: #ff5c24;
					color: #ffffff;
					position: absolute;
					top: -20rpx;
					right: 0rpx;
					text-align: center;
					font-size: 24rpx;
				}
			}

			.text {
				margin-left: 20rpx;

				.line-1 {
					display: flex;
					flex-direction: row;

					.title {
						margin-left: 10rpx;
						font-size: 34rpx;
						font-weight: 700;
						color: #bf9035;
						width: 320rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.time {
						display: flex;
						justify-content: end;
						font-size: 24rpx;
						color: #999999;
						margin-left: 80rpx;
					}

				}

				.info {
					color: #666;
					font-size: 28rpx;
					width: 450rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>
